<template>
	<view class="home">
		<view
			class="statusBar"
			:style="{ height: statusBarHeight + 'px' }"
		></view>
		<view class="welcome">
			<view class="avatar">
				<u-avatar
					:src="avatarSrc"
					size="50"
				></u-avatar>
			</view>
			<view class="welcom-content">
				<view class="title">Hello!</view>
				<view class="sub-title">Nice to meet you!</view>
			</view>
		</view>
		<view class="swiper">
			<u-swiper
				:list="swiperList"
				indicator
				indicatorMode="line"
				circular
				easingFunction="easeInOutCubic"
				height="190"
				keyName="image"
				previousMargin="22"
				nextMargin="22"
			></u-swiper>
		</view>
		<view class="new">新品</view>
		<view class="hot">热门</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			avatarSrc: '/static/images/avatar.jpg',
			swiperList: [
				{
					image: '/static/images/bake1.jpg',
					title: '吐司'
				},
				{
					image: '/static/images/bake2.jpg',
					title: '贝果'
				},
				{
					image: '/static/images/bake1.jpg',
					title: '日式豆沙包'
				}
			]
		};
	},
	computed: {
		...mapGetters(['statusBarHeight'])
	}
};
</script>

<style lang="scss" scoped>
.home {
	height: calc(100vh - 50px);
	/* #ifdef MP-WEIXIN */
	height: 100vh;
	/* #endif */
	background-color: $theme-back-color;
	padding: 30rpx 0;
	.welcome {
		display: flex;
		margin-bottom: 25rpx;
		padding: 30rpx;
		.avatar {
			margin-right: 25rpx;
			::v-deep .u-avatar__image {
				border-radius: 25rpx;
			}
		}
		.welcom-content {
			.title {
				font-size: 50rpx;
				font-weight: bold;
				letter-spacing: 1rpx;
			}
			.sub-title {
				font-size: 28rpx;
				color: #aaa;
			}
		}
	}
	.swiper {
		margin-bottom: 45rpx;
		::v-deep .u-swiper {
			background-color: $theme-back-color !important;
		}
		::v-deep .u-swiper__wrapper__item__wrapper__image {
			border-radius: 22rpx !important;
		}
	}
}
</style>
